<template>
	<view class="flex-container">
		<view>
			<text class="ddid">订单编号：2022481053</text>
			<text class="ddstate">已完成</text>
		</view>
		<view class="contentDetail">
			<image src="../../../static/image-che/举手课.jpeg"></image>
			<p>课程购买</p>
			<p>￥20.00</p>
		</view>
		<view><text class="ddzje">已付金额：￥20.00</text></view>
	</view>
	<view class="flex-container">
		<view>
			<text class="ddid">订单编号：2022481053</text>
			<text class="ddstate">已完成</text>
		</view>
		<view class="contentDetail">
			<image src="../../../static/image-che/彭于晏.jpeg"></image>
			<p>课程购买</p>
			<p>￥20.00</p>
		</view>
		<view><text class="ddzje">已付金额：￥20.00</text></view>
	</view>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
	components: {},
	setup() {
		let data = reactive({
			a: '',
			ghj: []
		});
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
template {
	background-color: grayscale($color: #dddddd);
}
.flex-container {
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 10rpx 0rpx;
	width: auto;
	margin: 30rpx 0rpx;
	border: 1rpx 0.5 gray solid;
	border-radius: 8px;
	color: grayscale($color: #717171);
}

.flex-container > view {
	border-bottom: 0.3rpx #e3e3e3 solid;
	padding: 0rpx 60rpx;
	margin: 5rpx 0rpx;
	width: auto;
	height: auto;
	line-height: 25px;
	font-size: 26rpx;
}
.flex-container > view:last-child {
	border-bottom: none;
}
.flex-container .contentDetail {
	height: 210rpx;
}
.flex-container .contentDetail :nth-child(2) {
	margin-top: 25rpx;
}
.flex-container .contentDetail :nth-child(3) {
	margin-top: 25rpx;
}
.ddstate {
	float: right;
}
image {
	width: 200rpx;
	height: 200rpx;
	float: left;
	margin-right: 40rpx;
}
</style>